<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" prop="questionType" label="题型">
        <template slot-scope="scope">
          {{ dict.label.topic_type[scope.row.questionType] }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="questionType" label="每题分值">
        <template slot-scope="scope" >
          <!-- <el-input-number
            v-model="scope.row.score"
            size="mini"
            controls-position="right"
            :precision="0"
            :min="1"
            :max="100"
            style="width: 100px"
            disabled
          ></el-input-number> -->
          <template v-if="scope.row.score">
            <span>{{ scope.row.score }}</span>
            <span style="margin-left: 6px">分</span>
          </template>
          <template v-else> - </template>
        </template>
      </el-table-column>
      <el-table-column align="center" label="题型数量">
        <el-table-column
          v-for="item in tableColumn"
          :key="item.value"
          align="center"
          :prop="item['count' + item.value]"
          :label="item.label"
        >
          <template slot-scope="scope">
            <template v-if="scope.row['max' + item.value] === 0"> - </template>
            <template v-else>
              <!-- <el-input-number
                v-model="scope.row['count' + item.value]"
                size="mini"
                controls-position="right"
                :precision="0"
                :min="0"
                :max="scope.row['max' + item.value]"
                style="width: 100px"
              ></el-input-number> -->
              <template v-if="scope.row['count' + item.value]">
                <span>{{ scope.row["count" + item.value] }}</span>
                <span style="margin-left: 6px">题</span>
              </template>
              <template v-else> - </template>
            </template>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { queryQuestionCountProportions, queryPapersQuestionCountProportions } from "@/api/juan/juanGenerate";
export default {
  name: "QuestionTypeTable",
  components: {},
  dicts: ["topic_type", "difficulty"],
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    generateDetails: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      visible: false,
      title: "选择课程",
      tableData: [],
      tableColumn: [],
    };
  },
  methods: {
    open(data) {
      this.visible = true;

      if (data.type === "questionRepos") {
        queryQuestionCountProportions({
          reposId: data.reposId,
          courseId: data.courseId,
          knowledgeIds: data.ids.join(","),
        })
          .then((res) => {
            const qsData = res.data;
            const oldData = this.generateDetails;
            if (qsData.length && oldData.length > 0) {
              qsData.forEach((item, k) => {
                oldData.forEach((info, i) => {
                  if (item.questionType === info.questionType && item.questionEasy === info.questionEasy) {
                    item.questionNum = info.questionNum;
                    item.score = info.questionScore;
                    this.$set(item, "count", info.questionNum); // 用户设置的题目数量
                    this.$set(item, "score", info.questionScore);
                    //this.$set(item, "questionScore", info.questionScore);
                  }
                });
              });
            }
            //this.renderData(res.data);
            this.renderData(qsData);
            this.$forceUpdate();
          })
          .catch();
      } else if (data.type === "paperRegroup") {
        queryPapersQuestionCountProportions(data.ids.join(","))
          .then((res) => {
            this.renderData(res.data);
          })
          .catch();
      }
    },
    close() {
      if (!this.loading) {
        this.visible = false;
      }
    },
    renderData(data) {
      let column = [];
      let rows = [];
      for (let i = 0; i < data.length; i++) {
        let item = data[i];

        let columnIndex = column.findIndex((cItem) => {
          return cItem.value === item.questionEasy;
        });
        if (columnIndex === -1) {
          column.push({
            value: item.questionEasy,
            label: this.dict.label.difficulty[item.questionEasy],
          });
        }

        let rowsIndex = rows.findIndex((cItem) => {
          return cItem.questionType === item.questionType;
        });
        if (rowsIndex === -1) {
          rows.push({
            questionType: item.questionType,
            score: item.score,
            questionScore: item.questionScore,
            questionNum: item.questionNum,
            count: item.count,
          });
        }
      }

      function findQuestionNum(questionType, questionEasy, type) {
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          if (item.questionType === questionType && item.questionEasy === questionEasy) {
            if (type === "max") {
              return item.questionNum;
            } else {
              return item.count;
            }
          }
        }

        return 0;
      }

      this.tableColumn = column;

      this.tableData = rows.map((item) => {
        // let option = { ...item, score: 1 };
        let option = { ...item };
        for (let j = 0; j < column.length; j++) {
          let cItem = column[j];
          option["max" + cItem.value] = findQuestionNum(item.questionType, cItem.value, "max");
          // option["count" + cItem.value] = 0;
          option["count" + cItem.value] = findQuestionNum(item.questionType, cItem.value, "count");
        }

        return option;
      });

      //console.log(this.tableData, "表格的数据");
    },
    onConfirm() {
      let paperData = this.tableData
        .map((item) => {
          let options = { ...item, children: [] };
          for (const key in item) {
            if (/^count\d+$/.test(key) && item[key] > 0) {
              options.children.push({
                easy: key.substring(5),
                count: item[key],
              });
            }
          }
          return options;
        })
        .filter((item) => {
          return item.children && item.children.length > 0;
        });

      let generateData = [];
      for (let i = 0; i < paperData.length; i++) {
        let item = paperData[i];
        for (let j = 0; j < item.children.length; j++) {
          let cItem = item.children[j];
          generateData.push({
            questionType: item.questionType,
            questionNum: cItem.count,
            questionEasy: cItem.easy,
            questionScore: item.score,
          });
        }
      }

      if (generateData.length > 0) {
        this.$emit("confirm", generateData);
      } else {
        this.$message.warning("请设置题目数量");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.table-row-attr + .table-row-attr {
  margin-top: 10px;
}

.question-types {
  margin: -16px 0;
  .type-item {
    display: flex;
    align-items: center;
    margin: 16px 0;

    .type-attr {
      display: flex;
      align-items: center;
      margin-right: 30px;
      font-size: 16px;
      color: #363b55;

      &.attr-label {
        font-weight: bold;
      }
    }
  }
}
</style>
